<template>
    <div class="body">
        <div class="banner banMis">
            <mt-swipe :auto="4000" :continuous="true">
                <mt-swipe-item v-for="(item,index) in bannerList" :key="index">
                    <router-link :to="item.link_url">
                        <img :src="item.thumb" alt="">
                    </router-link>
                </mt-swipe-item>
            </mt-swipe>
        </div>

        <div class="header">
            <ol><li :style="{left:jindu}"></li></ol>
            <dl>
                <dd>
                    <h1>此处任务名称十个字内进度<span>54%</span></h1>
                    <h2>继续您的活动任务得奖励</h2>
                </dd>
                <dt><i>继续活动</i></dt>
            </dl>
            <p></p>
        </div>

        <div class="nav" ref="navBox">
            <div :class="{navboxactive:navlistClass}">
                <ul>
                    <li v-if="nomission" :class="{active:icur===2}" @click="tabcheck(2)">
                        <h1>未完成任务</h1>
                        <p></p>
                    </li>
                    <li :class="{active:icur===0}" @click="tabcheck(0)">
                        <h1>普通任务</h1>
                        <p></p>
                    </li>
                    <li :class="{active:icur===1}" @click="tabcheck(1)">
                        <h1>会员任务</h1>
                        <p></p>
                    </li>
                </ul>
            </div>
        </div>

        <div ref="listBox" class="listbox">
            <img v-if="mislist.length<=0" class="noneList" src="../../assets/img/gg_img_zanwu.png" alt="">

            <div class="misbox" v-if="icur===2">
                <dl @click="$router.push({path: '/steps',query:{task_id:item.user_task_id,state:0}})" v-for="(item,index) in mislist" :key="index" >
                    <dd><img :src="item.thumbnail" alt="" @error="errorImage($event)"></dd>
                    <dt>
                        <h1 class="ellipsis">{{item.name}}</h1>
                        <h2>{{item.intro}}</h2>
                        <h3><i>{{item.complete_remark?item.complete_remark:'抓紧时间哦'}}</i></h3>
                        <span>￥{{ item.is_vip===1?item.vip_task_price:item.task_price | money }}</span>
                    </dt>
                </dl>
            </div>

            <div class="misbox" v-if="icur!==2">
                <dl @click="$router.push({path: '/detial',query:{id:item.id}})" v-for="(item,index) in mislist" :key="index">
                    <dd><img :src="item.thumbnail" alt="" @error="errorImage($event)"></dd>
                    <dt>
                        <h1 class="ellipsis">{{item.name}}</h1>
                        <h2>{{item.intro}}</h2>
                        <h3><i>{{item.complete_remark?item.complete_remark:'抓紧时间哦'}}</i></h3>
                        <span>￥{{ item.is_vip===1?item.vip_task_price:item.task_price | money }}</span>
                    </dt>
                </dl>
            </div>
        </div>
        <h5 v-if="mislist.length>10 && !listkey" @click="addMore()">加载更多</h5>
        <div class="btmBox" style="height: 2.2rem;"></div>
    </div>
</template>

<script>
    import {axiosPost} from "../../axios";
    import {Toast,Indicator} from "mint-ui";

    export default {
        name: "",
        data(){
            return{
                jin:55,
                icur:2,
                mislist:[],
                bannerList:[],
                navlistClass:false,
                listkey:false,
                nomission:true,
            }
        },
        computed:{
            jindu(){
                return -(1.07-1.07/100*(this.jin))+'rem'
            }
        },
        created() {

        },
        mounted() {
            if(!localStorage.getItem('userinfo')){
                sessionStorage.icur = 0;
                this.icur = 0;
                this.nomission = false;
                this.getmission();
                this.getBanner();
            }else{
                axiosPost('index/task_list',{
                    'select_type':2
                },(res)=>{
                    //console.log(res)
                    if(res.code!=1){
                        sessionStorage.icur = 0;
                        this.icur = 0;
                        this.nomission = false;
                    }
                    if(this.$route.query.id || this.$route.query.id==0){
                        this.icur = this.$route.query.id;
                    }else{
                        if(sessionStorage.icur){
                            this.icur = parseInt(sessionStorage.icur);
                        }
                    }
                    this.getmission();

                    this.getBanner();
                });
                window.addEventListener('scroll', this.handleScroll,true);
            }
        },
        methods:{
            addMore(){
                this.listkey = !this.listkey;
                this.$refs.listBox.style.height = 'auto';
            },
            handleScroll(){
                let top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
                if(top>this.$refs.navBox.offsetTop){
                    this.navlistClass = true;
                }else{
                    this.navlistClass = false;
                }
            },
            tabcheck(num){
                this.icur = num;
                this.getmission();
                sessionStorage.icur = num;
                this.listkey = false;
                this.$refs.listBox.style.height = 'auto';
                Indicator.open({
                    text: '加载中...',
                    spinnerType: 'double-bounce'
                });
            },
            getmission(){
                axiosPost('index/task_list',{
                    'select_type':this.icur
                },(res)=>{
                    //console.log(res)
                    if(res.code===-2){
                        localStorage.removeItem('userinfo');
                        Toast({
                            message: '登录过期，请重新登录',
                            duration: 1000
                        });
                        setTimeout(()=>{
                            this.$router.push('/login');
                        },1500);
                        return
                    }
                    if(res.code!==1){
                        this.mislist = [];
                        Indicator.close();
                        return
                    }
                    this.mislist = [];
                    for (let index in res.data){
                        this.mislist.push(res.data[index])
                    }
                    //设置只显示10条
                    if(this.mislist.length>10){
                        this.$nextTick(()=>{
                            this.$refs.listBox.style.height = this.$refs.listBox.children[0].children[0].offsetHeight * 10 + this.rem()*0.3*10 + 'px';
                        });
                    }

                    Indicator.close();
                });
            },
            //获取轮播图
            getBanner(){
                axiosPost('slideprojector/index',{
                    'type':2
                },(res)=>{
                    //console.log(res)
                    if(res.code!==1){
                        return Toast({
                            message: res.msg,
                            duration: 1000
                        });
                    }
                    this.bannerList = res.data;
                });
            }
        },
        destroyed() {
            window.removeEventListener('scroll', this.handleScroll,true)
        },
    }
</script>

<style scoped lang="less">
    @import "../../style/default";
    @import "../../style/indexlist";
    .body{
        background: @color4;
    }
    body #app .body .listActive{
        max-height: initial;
    }
    .banner{
        padding: 0.4rem;
        height: 1.8rem;
        img{
            height: 1.8rem;
        }
    }

    .header{
        padding: 0 0.4rem;
        ol{
            width:1.07rem;
            height:0.08rem;
            background:rgba(255,234,227,1);
            border-radius:0.04rem;
            position: relative;
            overflow: hidden;
            li{
                width:1.07rem;
                height:0.08rem;
                background:rgba(255,70,45,1);
                border-radius:0.04rem;
                position: absolute;
                left: -0.5rem;
                top: 0;
            }
        }

        dl{
            overflow: hidden;
            dd{
                float: left;
                width: calc(100% - 1.56rem);
                h1{
                    font-size:@font34;
                    font-weight:500;
                    color:@color3;
                    padding: 0.1rem 0;
                    span{
                        color:@color1;
                    }
                }
                h2{
                    font-size:0.24rem;
                    font-weight:400;
                    color:rgba(170,170,170,1);
                }
            }
            dt{
                width:1.56rem;
                padding: 0.08rem 0;
                line-height: normal;
                background:@color1;
                border-radius:0.26rem;
                text-align: center;
                font-size:@font28;
                font-weight:400;
                color:rgba(255,255,255,1);
                float: right;
                margin-top: 0.2rem;
                /*display: table;*/
                /*i{*/
                /*    display: table-cell;*/
                /*    vertical-align: middle;*/
                /*}*/
            }
        }

        p{
            margin-top: 0.39rem;
            border-bottom: 1px solid rgba(239,239,239,1);
        }
    }

    .nav{
        height: 1.1rem;
        .navboxactive{
            position: fixed;
            left: 0;
            top: 0;
            z-index: 1000;
        }
        div{
            height: 1.1rem;
            width: 100%;
            background: @color4;
            ul{
                overflow: hidden;
                margin: 0 0.4rem;
                .active{
                    h1{
                        font-size: 0.4rem;
                        line-height: 1.1rem;
                        color: @color3;
                    }
                    p{
                        display: block;
                    }
                }
                li{
                    float: left;
                    color:@color2;
                    margin-right: 0.4rem;
                    h1{
                        line-height: 1.14rem;
                        font-size:@font32;
                        font-weight:400;
                        height: 0.95rem;
                        overflow: hidden;
                    }
                    p{
                        width:0.42rem;
                        height:0.06rem;
                        background:rgba(42,43,63,1);
                        margin: 0 auto;
                        display: none;
                    }
                }
            }
        }
    }

    .listbox{
        overflow: hidden;
        .misbox{
            margin-top: 0;
            dl{
                margin-top: 0;
                margin-bottom: 0.3rem;
            }
        }
    }

    h5{
        height: 0.5rem;
        text-align: center;
        line-height: 0.5rem;
        color: @color2;
        font-size: @font28;
        padding: 0.2rem;
    }

</style>